<template>
    <div class="case">
        <div class="case-left">
            <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
        </div>
        <div class="case-right">
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
        </div>
    </div>
</template>

<script>
import Img from "../components/Img";
export default {
    name: "",
    data() {
        return {};
    },
    props: {},
    methods: {},
    components: { Img },
    mounted() {},
    updated() {}
};
</script>

<style scoped>
div{
    box-sizing: border-box;
}
.case {
    width: 100%;
    height: 160px;
    display: flex;
    /* padding: 0 10px; */
}
.case>div {
    width: 50%;
}
.case-left {
    border-radius: 15px;
    overflow: hidden;
    margin: 0 5px 0 0;
}
.case-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 15px ;
    overflow: hidden;
}
.case-right>div{
    height: 50%;
    
}
.case-right>div:nth-child(1){
    padding: 0 0 2px;
}
.case-right>div:nth-child(2){
    padding: 2px 0 0;
}
</style>
